Advantage to using CSS for the Background Image:
CSS images can be swapped out based on size of screen. Use @media screen breaks and the background-image property to change the image of the chosen div or other element. Use the background-image property sets an image in the background for an element. After adding the background-image code, browse for the image via URL (Uniform Resource Locator), which creates a path, written in text, to your source image. That might look like… background-image: url(images/ImageName.jpg); Note: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. If the image is small, it will automatically repeat to fill the available space. To make sure it doesn't repeat, 1) Make the image match the maximum size it will ever be based on your media screen plan, 2) use the "no-repeat" code — background-repeat: no-repeat.
Normalize CSS
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. Yes, you can have more than one CSS files attached to your HTML page. Make sure they are attached in the correct order (check the head section) — Normalize should be listed first, then your custom CSS file, which gives preference to your CSS code.
Viewport Code
This code should be added to the head section of every HTML page. This code makes your function better to smartphones and tablets. The code is as follows…
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
Favicon
Favicons are tiny square image files that are displayed as part of a website title in browsers. These icons should be 16x16px @72ppi. In the past you had to translate them into an .ico file using web tools, now you can skip that by saving them as a .png. Suggestion, you will probably want to use some transparent pixels for the background of your favicon.
<link rel="icon" href="images/favicon.ico" type="image/x-icon"> |
Metadata & SEO
The meta data you include in your page will determine how easy it is to find your site. SEO stands for Search Engine Optimization. The most important meta data items you should define include: robots, description, and title.
Robots
The robots code will invite or decline web search engines to remember your site, or ignore your site.
If you want it remembered, use
<meta name="robots" content="index, follow">.
If you want it to be ignored, then use
<meta name="robots" content="noindex, nofollow">.
Description
Your description is some of the key information that Google will "index" if invited. It is critical that your description is accurate. If not, your page will be lowered in ranking.
Use the following to add your description…
<meta name="Description" content=" Place your description here " />
Learn more by reading…
https://developers.google.com/focus/web-development
To improve your sites Google Ranking sign up for Google Search Console, add your property, plug your homepage into the URL Inspection tool, and hit “Request indexing.”
Start by indexing your site with Google at…
https://search.google.com/search-console/about
Title
If you don't fill this in your page will be "untitled". That makes your site look incomplete. Update the title code as follows…
<title>Your title here</title>
I feel other lines of meta data are important.
I suggest the following:
<meta charset="utf-8"> <meta id="MetaAuthor" name="Author" content="J. Blake Johnson" />
<meta name="copyright" content="Copyright (c) 2015 J. Blake Johnson. All Rights Reserved." />
<meta name="rating" content="General" />
Additional Meta Data
I still use Keywords meta code, as Google is not the only search engine. And as anything I can do to help make my pages easier to find on the web is an advantage.
<meta name="Keywords" content=" Place your keywords here " />
Z-Index
The z-index property allows objects to move forward (up) or backward (down) on the page, like an elevator. The lower the number, the further back it will be from the screen, and the larger the number, the higher it will be on the screen.
You should use a z-index when giving an element <div> or other "box" a special placement (anything other than static).
Static - Basic default.
Fixed - Prevents element from moving or scrolling.
Absolute - Allows you to place elements exactly where you want them by using the positioning attributes top, left, bottom, and right to set the location.
Relative – relative to its place in the code.
If any special positioning is used, it is also recommended that you clarify the Top or Bottom, and Left or Right of the element.
About X and Y
X-axis: Horizontal axis of the page
Y-axis: Vertical axis of the page.
An X,Y-axis of 0,0 would start at the top right of the page.